<template>
  <div class="box">
    <el-button type="text" @click="dialogVisible = true">
      <el-button type="primary" plain icon="el-icon-plus">新增</el-button>
    </el-button>
    <el-dialog
      title="添加客户档案"
      :visible.sync="dialogVisible"
      width="50%"
      class="dialog"
      :before-close="handleClose"
    >
      <div class="center">
        <el-form>
          <el-form-item label="回访客户" prop="name">
            <el-input
              :style="{ width: '300px' }"
              v-model="addcustomer.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="回访方式" prop="name">
            <el-input
              :style="{ width: '300px' }"
              v-model="addcustomer.name"
            ></el-input>
          </el-form-item>

     
          <div class="block">
            <span class="demonstration">回访日期</span>
            <el-date-picker
         
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { GetprodapicustomerApi } from "@/request/api";
export default {
  data() {
    return {
      dialogVisible: false,
      addcustomer: {
        name: "",
        phone: "",
        sex: "",
        // 日期
        pickerOptions: {
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                picker.$emit("pick", new Date());
              },
            },
            {
              text: "昨天",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
              },
            },
            {
              text: "一周前",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
              },
            },
          ],
        },

      },
    };
  },
  created() {
    this.getTableDate();
  },
  methods: {
    //封装成方法
    async getTableDate() {
      const GetprodapicustomerApiRes = await GetprodapicustomerApi({
        name: this.name,
        phone: this.phone,
        sex: this.sex,
        sex: this.sex,
      });
      if (!GetprodapicustomerApiRes) return;
      console.log(GetprodapicustomerApiRes);
      console.log(GetprodapicustomerApiRes);
      //将数据赋值给
      this.tableData = GetprodapicustomerApi.rows;
      this.total = GetprodapicustomerApi.total;
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(( ) => {
          done();
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
.center {
  transform: translateX(100px);
}
.dialog {
  width: 100% !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}
.box{
 width: 50%;
}
.el-date-picker{
  margin-left: 20px;
}
</style>
